<!--<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">-->

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<script type="text/javascript">
function post(url,post_data,callback){
    $.post(url,JSON.stringify(post_data),function(data){
        if(data.msg){
            alert(data.msg)
        }else{
            callback(data)
        }
    })
}

var apps=[
	{sku:'AAAA',icon:'/media/img/icon_512.png',app_code:'FFFF',status:'ok',screenshots:['/media/img/01.jpg','/media/img/02.jpg'],meta:'How exciting! These beautiful moe beautiful mommies are pregnant and need your careful treatment. Join these mommies-to-be on their journey from pregnancy',fea_graph:'/media/img/Feature Graphic.jpg'},
	{sku:'BBB',icon:'ZZZ',app_code:'GGG',status:'ok',screenshots:['aaa','bbb'],meta:'jj yy '}
];

Vue.component('second-page',{
	template:'#second-page',
	data:function () {
		return {
			studio:studio,
			apps:[], //apps,
			crt:{},
            unfold:true,
            loading_app:true,
		}
	},
    beforeCompile:function(){
        var self=this;
        var post_data={
            get_studio_apps:{studio:studio.name}
        }
        self.loading_app=true
        $.post('',JSON.stringify(post_data),function(data){
	       self.loading_app=false
            apps = data.get_studio_apps
            var fea_sku_ls=studio.fea_app.split(';')
            for (k in apps){
                if(fea_sku_ls.indexOf(apps[k].sku)!=-1){
                    apps[k].is_fea=true;
                }
            }
            self.apps = apps

        })
    },
    methods:{
	    app_class:function (app) {
	    	var out=app.status
	    	if(app==this.crt){
		    	out+=' info'
	    	}
	   		return out
	    },
        
		update_app:function (app) {
			var self=this;
			var post_data={
				order:['update_app','get_app'],
				update_app:{sku:app.sku,studio_name:studio.name},
				get_app:{sku:app.sku},
			}
			show_uploading()
			var delay= $.post('',JSON.stringify(post_data),function (data) {
				hide_uploading()
				for(x in data.get_app){
					app[x]=data.get_app[x]
					//Vue.set(self.crt,x,data.get_app[x])
				}
			})
			return delay
		},
		save_app:function (app) {
			var post_data={save_app:{app:JSON.stringify(app)}}
			return $.post('',JSON.stringify(post_data))
		}
    }
})
</script>
<style>
    .panel{
        float: left;
        width: 40%;
        padding: 15px;
    }
    .panel2{
        width: 45%;
        margin-left: 50px;
        position: fixed;
        right: 50px;
        top: 235px;
    }
    .panel-heading{
        padding: 10px 5px;
        font-size: 16px;
        font-weight: 600;
        background: rgba(0, 146, 242, 0.8);
        color: #ffffff;
    }
    .list_tab th{
        cursor: auto;
    }
    .appInfo_tab{
        width: 100%;
        table-layout:fixed;
        background: #f0f0f0;
    }
    .appInfo_tab th{
        padding-left: 25px;
        width: 150px !important;
    }
    .appInfo_tab td ul{
        margin: 0;
    }
    .little-icon{
        width: 42px;
        cursor: pointer;
    }
    .little-img{
        overflow: hidden;
        margin: 0;
    }
    .little-img>li{
        list-style-type: none;
        float: left;
    }
    .little-img>li img{
        width: 45px;
        margin-right: 20px;
        cursor: pointer;
    }
    .little-feature{
        height: 42px;
        cursor: pointer;
    }
    .btn{
        padding: 0;
        padding: 2px 12px;
    }
    .meta{
        font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
        border: 0 none;
        margin: 0;
        padding: 0;
        background-color: transparent;
        word-break: keep-all;
        min-height: 260px !important;
        overflow: auto;
        cursor: pointer;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        /*-webkit-line-clamp: 3;*/
        line-height: 20px;
        max-height: 55px;
    }
    .popup{
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(77, 77, 77, 0.4);
        display:none;
    }
    #bigImg{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        margin: auto;
        vertical-align: middle;
    }
    #bigImg img{
        max-width: 1000px;
        max-height: 750px;
        min-width: 416px;
        min-height: 416px;
    }
    .imiddle{
	    position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        margin: auto;
        vertical-align: middle;
        z-index: 1000;
    }
    .list_tab td input{
        width: 16px;
        height: 16px;
    }
    .list_tab td img{
        vertical-align: middle;
        width: 16px;
        height: 16px;
    }
	.not_found{
		color: red;
	}
    .appInfo_tab tr td ul{
        overflow: auto;
        max-height: 300px;
    }
    .appInfo_tab tr td li{
        margin-bottom: 5px;
    }
</style>

<template id='second-page'>
	<div>
		<div style="overflow: hidden">
            <div class="panel panel-default">
                <div class="panel-heading">App list</div>
                <!--<button name="test" type="button" value="val" @click='update_studio(studio.name)'>refresh</button>-->
                <table class="table table-hover list_tab">
                    <tr>
                        <th>Featured</th>
                        <th>SS Orientation</th>
                        <th>SKU</th>
                        <th>APP Code</th>
                        <th>App Path Name</th>
                        <th>Status</th>
                        <th>Refresh</th>
                    </tr>
                    <tr v-for='app in apps'  :class='app_class(app)'>
                        <td><input type="checkbox" name="" v-model='app.is_fea' :disabled='app.status=="error"'></td>
                        <td><span v-text='app.orientation'></span></td>
                        <td ><a v-text='app.sku' @click.prevent='crt=app' href="javascript:;"></a></td>
                        <td v-text='app.app_code'></td>
                        <td ><input type="text" v-model='app.name' style='min-width:150px' class="form-control" >
	                      
                        </td>
                        <td><img :src='"/static/image/"+app.status+".png"' alt=""></td>
                        <td>
	                        <app-btn :save_app='save_app' :update_app='update_app' :app.sync='app'></app-btn>
                            <!--<a href="" class="btn" @click.prevent='update_app(app)'>
                                <span class="icon icon-refresh" ></span>
                            </a>-->
                        </td>
                    </tr>
                </table>
                <div v-show='loading_app'>
	                <i class="fa fa-spinner fa-spin fa-3x"></i>
                	<span>this is new studio, please waiting for backend generate app list...</span></div>
            </div>
            <div class="panel panel-default panel2" v-show="crt.sku">
                <div class="panel-heading">App Info</div>
                <table class="table table-hover appInfo_tab">
                    <tr>
                        <th>SKU</th>
                        <td v-text='crt.sku'></td>
                    </tr>
                    <tr>
                        <th>APP Icon</th>
                        <td>
                            <span v-if='!crt.icon' class="not_found">not found</span>
                            <img v-if='crt.icon' :src="crt.icon" class="little-icon" onclick="enlarge(this)"/>
                        </td>
                    </tr>
                    <tr>
                        <th>Screenshots</th>
                        <td>
                            <span v-if='!crt.screenshots || crt.screenshots.length==0' class="not_found">not found</span>
                            <ul class="little-img" v-if='crt.screenshots'>
                                <li v-for='shot in crt.screenshots' track-by="$index">
                                    <img :src="shot" onclick="enlarge(this)"/>
                                </li>
                            </ul>
                        </td>
                    </tr>
                    <tr>
                        <th>Featured Graphic</th>
                        <td>
                            <span v-if='!crt.fea_graph' class='not_found'>not found</span>
                            <img v-if='crt.fea_graph' :src="crt.fea_graph" class="little-feature" onclick="enlarge(this)"/>
                        </td>
                    </tr>
                    <tr>
                        <th>Meta Info</th>
                        <td >
	                        <span v-if='!crt.long_dsp' class='not_found'>not found</span>
                            <pre :class="{'meta':unfold}" v-text='crt.long_dsp' @click="unfold= !unfold " v-if='crt.long_dsp'>
                                
                            </pre>
                        </td>
                    </tr>
                    <tr>
                        <th>Log</th>
                        <td>
                            <ul>
                                <li v-for='log in crt.log'>
	                                <img :src='"/static/image/"+log.type+".png"' alt="" style='width:10px;height:10px;'>
	                                <span v-text='log.time'></span>
	                                <span v-text='log.content'></span>
	                                
	                               </li>
                            </ul>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
	</div>
</template>

<script type="text/javascript">
	Vue.component('app-btn',{
		template:'#app_btn',
		props:['update_app','save_app','app'],
		data:function () {
			return {
				org_value:this.app.name
			}
		},
		methods:{
			is_change:function () {
				return this.org_value!=this.app.name
			},
			wrap_update:function (app) {
				var self=this;
				this.update_app(app)
				.done(function () {
					self.clear_org()
				})
			},
			wrap_save:function (app) {
				var self=this;
				this.save_app(app)
				.done(function () {
					self.clear_org()
				})
			},
			clear_org:function () {
				var self=this;
				Vue.nextTick(function () {
					self.org_value = self.app.name
				})
			}
		},
	})
</script>

<template id='app_btn'>
	<div>
		<a v-show='!is_change()' href="" class="btn" @click.prevent='wrap_update(app)'>
        	<span class="icon icon-refresh" ></span>
     	</a>
     	<a v-show='is_change()' href="" class="btn" @click.prevent='wrap_save(app)'>
        	<span>save</span>
     	</a>
	</div>
	
</template>


<script>
    $(function(){
        $('body').append('<div class="popup" id="img_wrap"><div id="bigImg"></div></div>');
        $('#img_wrap').click(function(){
            $(this).hide();
        });

		// for spin icon --by heyulin
        $('body').append('<div class="popup" id="load_wrap"><i class="fa fa-spinner fa-spin fa-3x imiddle"></i></div>');
    });
    function enlarge(ele){
        $("#bigImg").empty();
        $('#img_wrap').show();
        $(ele).clone().appendTo("#bigImg");
    }
    
	// spin icon for uploading  --by heyulin 
	function show_uploading() {
		$('#load_wrap').show()
	}
	function hide_uploading() {
		$('#load_wrap').hide()
	}

    $(window).scroll(function(){
        var n=$(document).scrollTop();
        if(n>=200){
            $('.panel2').css({top:'40px'});
        }
        if(n<200){
            $('.panel2').css({top:'235px'});
        }
    });
</script>

